<template>
	<div>
		<div class="container">
			<div class="handle-box">
                <!--搜索条件：一个输入框（用户名）-->
                <!--列表显示 用户名、省份、地址、电话、url-->
            <div class="handle-box">
              
                <el-input v-model="query.name" placeholder="用户名" class="handle-input mr10"></el-input>
                <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
                <el-button type="primary" :icon="Plus">新增</el-button>
            </div>
            <!--列表展示数据区域:歌手、歌名、介绍、图片、url、操作按钮-->
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
                <el-table-column prop="name" label="用户名"></el-table-column>
				<el-table-column prop="provinceName" label="省份"></el-table-column>
                <el-table-column prop="cityName" label="城市"></el-table-column>
				<el-table-column prop="address" label="地址"></el-table-column>
                <el-table-column prop="phone" label="电话"></el-table-column>
				<el-table-column label="图片" align="center">
					<template #default="scope">
						<el-image
							class="table-td-thumb"
							:src="scope.row.pic"
							:z-index="10"
							:preview-src-list="[scope.row.pic]"
							preview-teleported
						>
						</el-image>
					</template>
				</el-table-column>
				
				<el-table-column label="操作" width="220" align="center">
					<template #default="scope">
						<!-- <el-button text :icon="Edit" @click="handleEdit(scope.$index, scope.row)" v-permiss="15">
							编辑
						</el-button>
						<el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index)" v-permiss="16">
							删除
						</el-button> -->
					</template>
				</el-table-column>
			</el-table>
            <!--分页导航条-->
            <div class="pagination">
				<el-pagination
					background
					layout="total, prev, pager, next"
					:current-page="query.pageNum"
					:page-size="query.pageSize"
					:total="pageTotal"
					@current-change="handlePageChange"
				></el-pagination>
			</div>
			</div>
		</div>
    </div>	
</template>
<script setup lang="ts">
import {reactive, ref} from 'vue'
import {Delete, Edit, Search, Plus} from '@element-plus/icons-vue';
import http from '../utils/request';

//总记录数
const pageTotal = ref(0);

//搜索表单对象
//总记录数，渲染分页导航条
const query = reactive({
    name:'',
    pageNum:1,
    pageSize:10,
});
//渲染列表数据源
const tableData = ref([]);

const getData = async function(){
    console.log('getData....')
    // const res = await fetch('https://yesno.wtf/api')
    // console.log(await res);
    http.get('admin/address?pageNum= ' + query.pageNum + '&pageSize=' + query.pageSize + '&name', {

    }).then((res) => {
        console.log("【成功】获取地址列表:",res);
        //1.将查询到的列表数据赋值给 tableData
        tableData.value = res.data.data.list;
        console.log('tableData = ',tableData)
        //2.构造分页对象，展示分页导航条
        pageTotal.value = res.data.data.total;
    }).catch(error => {
        console.log("【失败】获取地址列表:",console.error);
    });
}
//点击"搜索"按钮触发
const handleSearch = function(){
    query.pageNum = 1;//设置页码为第1页
    getData();
}
//当用户点击分页导航条时触发
const handlePageChange = function(value: number){
    console.log('当前页面已改变,新页码 = ' ,value)
    query.pageNum = value;
    getData();
}
//进入页面之后自动调用getData查询并渲染数据
getData();

</script>
<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #ff0000;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
</style>